<template>
  <h1>登录</h1>
  <div>

    <div>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="Login">登录</el-button>
        </el-form-item>

      </el-form>
    </div>





  </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import {useRouter} from "vue-router";
import axios from 'axios'

const router = useRouter()


const form = reactive({
  username: '',
  password: ''
})

const Login = () => {
  if (form.username === ''){
    alert('请填写用户名')
  }else if (form.password === ''){
    alert('请填写密码')
  }

  if (form.username && form.password){
    axios.post(`http://localhost:8000/api/login/`,{username:form.username,password:form.password}).then(res=>{
      if (res.data.code === 1){
        alert('登录成功')
        router.push('/')
        localStorage.setItem('token',res.data.data.token)
        localStorage.setItem('username',res.data.data.username)
        localStorage.setItem('refresh_token',res.data.data.refresh_token)
        localStorage.setItem('user_id',res.data.data.user_id)
      }else {
        alert(res.data.message)
      }
    }).catch(err=>{
      console.log(err)
      alert('登录失败')
    })
  }


}


</script>

<style scoped>

</style>